@font-face {
	    font-family: 'butler_extrabold';
	    src: url('../fonts/butler_extrabold.eot');
	    src: url('../fonts/butler_extrabold.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/butler_extrabold.woff') format('woff'),
	         url('../fonts/butler_extrabold.ttf') format('truetype'),
	         url('../fonts/butler_extrabold.svg#Ubuntu-r') format('svg');
	    font-weight: normal;
	    font-style: normal;
    }

body {
  margin : 0;
}

header{
  padding-top: 144px;
  margin-right: 0px;
  padding-left: 36px;
  padding-bottom: 36px;
  width : 70%;
}

h1 {
  font-family: 'butler_extrabold', serif;
  font-size: 126px;
  font-weight: 900;
  letter-spacing: 0.029em;
  font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
  margin : 0;
}

section#title h1 a {
  text-decoration: none;
  color: #556C96;
}

section#title p {
  margin-top: 12px;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;
  padding : 0;
  border : 0;
  box-sizing: border-box;
  text-align : right;
  font-size: 16px;
  line-height: 1.625;
  font-weight: 200;
  color: #475465;
  hyphens: auto;
  word-break: break-word;
	width: 880px;
}

/*--------------------*/
/*--menu responsive --*/
/*--------------------*/
header .nav {
    display : none;
}

section#hamburger {
    display : none;
}

header .responsive button#icon {
    font-size: 35px;
    color : #556C96;
    position : absolute;
    right : 2px;
    z-index : 1002;
    padding : 10px 10px 10px 10px;
    background-color: white;
    border: none;
}

header .responsive {
    display : flex ;
    width : 100%;
    right : 0px;
		top : 0px;
    position : absolute;
    z-index: 1000;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: 'Montserrat';
}

header .responsive a {
    text-decoration : none;
    color : #556C96;
}

header .responsive a:hover {
    text-decoration : underline;
}

header nav#navbar {
    position: fixed;
    height : 100%;
}

header .responsive ul#responsivemenu {
	display: flex;
  flex-direction: column;
  margin: 100px 0px 0px 0px;
  padding : 0px 10px;
}
header .responsive ul#responsivemenu li .under {
    flex-direction: column;
    margin-top : 20px;
}

header .responsive ul#responsivemenu li .under li {
    text-align: right;
    color : #556C96;
}

header .responsive ul#responsivemenu li,
header .responsive ul#responsivemenu li ul li a  {
    font-size: 50px;
    text-align: right;
    right : 20px;
    text-decoration: none;
    color : #264653;
    list-style: none;
    margin: 2px 0px 10px 0px;
    width : 100%;
}

header .responsive ul#responsivemenu li:hover {
    border-top : none;
    margin: 2px 0px 10px 0px;
}

header .responsive ul#responsivemenu span#footer {
    margin-top : 30px;
}

/*-- Responsive --*/
@media screen and (max-width : 1400px){
	header{
		padding-top : 0px;
		padding-bottom : 0px;
	}

  section#hamburger {
    display : flex;
    flex-wrap: wrap;
    position : fixed;
    background-color: white;
    color : #556C96;
    width : 100%;
    height : 70px;
    top : 0;
    left : 0;
    z-index : 999;
    border-bottom: solid 1px #e76f51;
  }

    section#hamburger h1 {
        margin : 0px auto;
        text-align: center;
				font-size: 50px;
    }

    section#hamburger h1 a {
      text-decoration: none;
      color : #556C96;
			vertical-align: middle;
    }

    section#hamburger button#icon {
        font-size: 50px;
        padding : 0px 15px 0px 15px;
        position : fixed;
        right : 0;
        margin : 0px 10px 0px 10px;
        background-color: white;
        border : none;
        z-index : 3;
        color: #556C96;
    }

    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        padding : 0px 0px 0px 15px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 40px;
    }

    header .responsive ul#responsivemenu li p {
        margin : 0;
        font-size :50px;
        text-align : right;
    }

    section#title {
        display : none;
    }

}

@media screen and (max-width : 820px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 45px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :45px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 35px;
    }
    section#hamburger h1 a{
        letter-spacing: 0.2px;
        line-height: 1.25;
        vertical-align: middle;
    }
    section#hamburger button#icon {
        font-size: 30px;
        padding-top: 15px;
        padding-right: 30px;
        width: 25px;
        height: 25px;
        background: none;
        position: fixed;
    }

    section#hamburger{
        border-bottom: solid 1px #e76f51;
    }
}

@media screen and (max-width : 755px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 42px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :42px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 32px;
    }
}

@media screen and (max-width : 658px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 38px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :38px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 28px;
    }
}

@media screen and (max-width : 605px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 35px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :35px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 25px;
    }
}

@media screen and (max-width : 565px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 32px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :32px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 22px;
    }
}

@media screen and (max-width : 550px) {
  header ul li {
    padding : 0px 15px;
    font-size : 20px;
  }
}

@media screen and (max-width : 525px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 30px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :30px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 20px;
    }

}

@media screen and (max-width : 500px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 28px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :28px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 22px;
    }

    section#hamburger h1 {
        width: 100%;
        text-align : center;
    }

}

@media screen and (max-width : 490px){
	section#hamburger {
		height : 55px;
	}
	section#hamburger h1{
		font-size: 40px;
	}
	section#hamburger button#icon {
		padding-top: 8px;
	}

		header ul li {
        margin : 2px 0px 30px 0px;
    }
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        font-size: 26px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :26px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 21px;
    }

}

@media screen and (max-width : 430px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        padding : 0px 0px 0px 18px;
        font-size: 24px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 18px;
    }

		header .responsive ul#responsivemenu {
			display: flex;
		  flex-direction: column;
		  margin: 100px 50px 0px 0px;
		  padding : 0px 10px;
		}
}

@media screen and (max-width : 355px) {
    header .responsive ul#responsivemenu li,
    header .responsive ul#responsivemenu li ul li a {
        padding : 0px 0px 0px 20px;
    }

		section#hamburger{
			height: 45px;
		}

		section#hamburger h1{
			font-size: 30px;
		}
		section#hamburger button#icon {
			padding-top: 2px;
		}
}

@media screen and (max-width : 340px) {
    header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
        padding : 0px 0px 0px 18px;
        font-size: 21px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :21px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 16px;
    }

		section#hamburger button#icon {
				padding-right: 30px;
		}

}

@media screen and (max-width : 307px) {
    header .responsive ul#responsivemenu li,
    header .responsive ul#responsivemenu li ul li a {
        font-size : 19px;
    }

    header .responsive ul#responsivemenu li p {
        font-size :19px;
    }

    header .responsive ul#responsivemenu span#footer li {
        font-size: 15px;
    }
}

@media screen and (max-width : 290px){
  section#hamburger h1 a {
        font-size: 25px;
  }
	section#hamburger h1 {
  	width: 100%;
  	text-align: left;
	}
	header .responsive ul#responsivemenu {
		display: flex;
	  flex-direction: column;
	  margin: 100px 50px 0px -115px;
	  padding : 0px 10px;
	}
}

@media screen and (max-width : 270px){
    header nav ul li {
        font-size : 20px;
    }
		section#hamburger button#icon {
  		padding-right: 30px;
	}
	header .responsive button#icon {
	    padding : 10px 32px 10px 10px;
	}
}

@media screen and (max-width : 240px){
	section#hamburger button#icon {
  	padding-right: 30px;
	}
	header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
	  font-size: 16px;
	}
	header .responsive ul#responsivemenu span#footer li {
  font-size: 11px;
	}
	header .responsive button#icon {
			padding : 10px 65px 10px 10px;
	}
}

@media screen and (max-width : 220px){
	section#hamburger button#icon {
  	padding-right: 30px;
	}
	section#hamburger h1 a {
  font-size: 22px;
	}
}

@media screen and (max-width : 210px){
	section#hamburger button#icon {
  	padding-right: 30px;
	}
	header .responsive button#icon {
			padding : 10px 85px 10px 10px;
	}
}

@media screen and (max-width : 200px){
	section#hamburger button#icon {
  	padding-right: 30px;
	}
}

@media screen and (max-width : 190px){
	section#hamburger button#icon {
  	padding-right: 30px;
	}
	section#hamburger h1 a {
  font-size: 20px;
	}
	header .responsive ul#responsivemenu li, header .responsive ul#responsivemenu li ul li a {
		font-size: 14px;
	}
	header .responsive button#icon {
			padding : 10px 100px 10px 10px;
	}
}

@media screen and (max-width : 175px){
	section#hamburger button#icon {
  	padding-right: 30px;
		font-size : 25px;
	}
	section#hamburger h1 a {
  font-size: 18px;
	}
	header .responsive button#icon {
			padding : 10px 100px 10px 10px;
	}
}